<template>
	<view>
		<navbar title="充值"></navbar>
		<view class="recharge-title fa jcsb">
			<view class="fz30 fwb">充值方式</view>
			<view class="fa">
				<image class="wxpay-icon" src="../../static/wxpay.png" mode=""></image>
				<view>微信支付</view>
			</view>
		</view>
		<view class="recharge-wrapper">
			<view class="fz30 fwb">充值金额</view>
			<view class="fill fa">
				<input type="text" placeholder="请输入充值金额 (元)" placeholder-style="font-size: 28rpx" v-model="amount" />
			</view>
			<view class="cla">选择充值金额</view>
			<view class="recharge-box flex fww">
				<view class="recharge-list" v-for="(item, index) in rechargeList" :key="index">
					<view class="recharge-inner" :class="{active: index == rechargeIndex}" @click="rechargeChange(item, index)">￥{{item}}</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottombar">
			<view class="bottombar-box fa fdc jcc">
				<view class="confirm-button" @click="goRecharge">立即充值</view>
			</view>
			<view class="fixed-place"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				amount: '',
				rechargeList: [],
				rechargeIndex: 0,
				recharge: '',
				lock: true
			};
		},
		onLoad() {
			this.getSetting()
		},
		methods: {
			rechargeChange(item, index) {
				this.amount = item
				this.rechargeIndex = index
			},
			getSetting() {
				this.api.paySettingFunc().then(res => {
					if(res.code == 200) {
						res.data.forEach(item => {
							this.rechargeList.push(item.price)
						})
						this.recharge = res.data[0].price
					}
				})
			},
			goRecharge() {
				if(this.amount) {
					this.recharge = this.amount
				}
				if(!this.recharge) return uni.showToast({
					title: '请输入充值金额',
					icon: 'none'
				})
				if(!this.lock) return false
				this.lock = false
				uni.showLoading({
					title: '加载中'
				})
				this.api.miniAppPayFunc({
					payType: 0,
					recharge: this.recharge
				}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: res2 => {
								uni.showToast({
									title: '充值成功'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						})
						this.lock = true
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.lock = true
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recharge-title{
		padding: 40rpx 32rpx;
		background-color: #fff;
		.wxpay-icon{
			margin-right: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.recharge-wrapper{
		margin-top: 28rpx;
		padding: 24rpx 32rpx;
		background-color: #fff;
		.fill{
			margin-top: 20rpx;
			margin-bottom: 24rpx;
			padding: 0 24rpx;
			height: 88rpx;
			border-radius: 10rpx;
			background-color: var(--bodybg);
		}
		.recharge-box{
			margin-right: -66rpx;
			padding-top: 24rpx;
			.recharge-list{
				margin-bottom: 32rpx;
				padding-right: 66rpx;
				flex-basis: 33.33%;
				height: 100rpx;
				line-height: 100rpx;
				box-sizing: border-box;
				.recharge-inner{
					width: 100%;
					height: 100%;
					border: 2rpx solid var(--bodybg);
					border-radius: 10rpx;
					text-align: center;
					color: #777;
					background-color: var(--bodybg);
					&.active{
						border: 2rpx solid var(--theme);
						color: var(--theme);
						background: rgba(46,203,83,0.1);
					}
				}
			}
		}
	}
	.fixed-bottombar{
		.bottombar-box{
			z-index: 98;
			position: fixed;
			bottom: 0;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 24rpx;
			height: 120rpx;
			background-color: var(--bodybg);
			z-index: 999;
			.confirm-button{
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44px;
				font-size: 30rpx;
				text-align: center;
				color: #fff;
				background: var(--theme);
			}
		}
		.fixed-place{
			height: 120rpx;
		}
	}
</style>
